<template>
  <div class="q-send">
    <n-space justify="center" style="margin-top: 3vh">
      <n-card class="q-card">
        <div v-if="isReleased">
          <n-space justify="space-between">
            <div>
              此问卷正在运行<br />您可以查看结果或者&nbsp;
              <n-button @click="closeQ" style="width: 15vw" type="info">
                暂停接受问卷
              </n-button>
            </div>
            <n-button text @click="goToDesign">
              <n-alert title="问卷设计" type="info">
                <template #icon>
                  <n-icon>
                    <Settings />
                  </n-icon>
                </template>
              </n-alert>
            </n-button>
          </n-space>

          <n-divider></n-divider>
          <n-space justify="center">
            <n-row>
              <div
                style="margin-top: 1.5vh; cursor: pointer"
                @click="downloadQR"
              >
                <n-popover trigger="hover">
                  <template #trigger>
                    <qrcode-vue :value="qLink" level="H" id="qr-code" />
                  </template>
                  <span>点击即可下载</span>
                </n-popover>
              </div>
              <div class="gap"></div>
              <div class="gap"></div>
              <n-space vertical>
                <n-space justify="space-between">
                  <n-h3 style="margin-top: 4vh">问卷链接与二维码</n-h3>
                </n-space>
                <n-space>
                  <n-input-group>
                    <n-input
                      v-model:value="qLink"
                      style="min-width: 16vw"
                      disabled
                    />
                    <n-button @click="copyLink">复制</n-button>
                    <n-button @click="openLink">打开</n-button>
                    <n-button @click="changeLink">更换</n-button>
                  </n-input-group>
                  <VueQr3></VueQr3>
                </n-space>
              </n-space>
            </n-row>
          </n-space>
        </div>
        <div v-else>
          此问卷处于草稿状态<br />如果您的问卷准备就绪，您可以 &nbsp;
          <n-button @click="openQ" style="width: 10vw" type="info"
            >发布</n-button
          >
        </div>
      </n-card>
    </n-space>
    <n-divider> </n-divider>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, defineAsyncComponent } from 'vue';
import { Ques } from '@api/question';
import QrcodeVue from 'qrcode.vue';
import { useRouter } from 'vue-router';
import { Base64 } from 'js-base64';
import { Settings } from '@vicons/ionicons5';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const generateQR = () => {};

// 问卷信息
const id = Number(props.id);

const baseId = computed(() => {
  return Base64.encode(Base64.encode(Base64.encode(id.toString())));
});
const isReleased = ref(false);
// 问卷网址
const baseURL = window.location.host;
const qLink = computed(() => {
  return 'http://' + baseURL + '/#/r/' + baseId.value + '/' + randomCode.value;
});
const copyLink = () => {
  var domUrl = document.createElement('input');
  domUrl.value = qLink.value;
  domUrl.id = 'creatDom';
  document.body.appendChild(domUrl);
  domUrl.select(); // 选择对象
  document.execCommand('Copy'); // 执行浏览器复制命令
  let creatDom: any = document.getElementById('creatDom');
  creatDom.parentNode.removeChild(creatDom);
};
const openLink = () => {
  window.open(qLink.value.toString());
};
const changeLink = () => {
  Ques.changeCode({
    id: id,
  }).then((res: any) => {
    console.log(res);
    if (res.data.status === 200) {
      randomCode.value = res.data.data.randomCode;
      window.$message.success('成功！');
    }
  });
};
const ddl = ref('');

onMounted(() => {
  getCode();
});

// random code
const randomCode = ref('');
const getCode = () => {
  Ques.getCode({
    id: id,
  }).then((res: any) => {
    console.log(res);
    if (res.data.status === 200) {
      randomCode.value = res.data.data.randomCode;
      isReleased.value = res.data.data.qStatus > 0 ? true : false;
      console.log('isReleased.value: ', isReleased.value);
      console.log(qLink.value);
    } else {
      window.$message.error(res.data.msg);
    }
  });
};

const router = useRouter();
// 开启问卷
const openQ = () => {
  Ques.openQ({
    id: id,
  }).then((res: any) => {
    console.log(res);
    if (res.data.status === 200) {
      window.$message.success('开启成功！');
      router.go(0);
    } else {
      window.$message.error('开启失败！');
    }
  });
};
// 关闭问卷
const closeQ = () => {
  Ques.closeQ({
    id: id,
  }).then((res: any) => {
    console.log(res);
    if (res.data.status === 200) {
      window.$message.success('关闭成功！');
      router.go(0);
    } else {
      window.$message.error('关闭失败！');
    }
  });
};
// 去问卷设计
const goToDesign = () => {
  router.push('design');
};
// 下载QRcode
const downloadQR = () => {
  const iconUrl = document.getElementById('qr-code');
  console.log(iconUrl.toString());
  const a: any = document.createElement('a');
  a.download = '鲸语问卷-二维码';
  const event = new MouseEvent('click');
  a.href = (iconUrl as any).toDataURL();
  console.log('a.href: ', a.href);
  a.dispatchEvent(event);
};
</script>

<style scoped lang="scss">
.q-send {
  padding: 1vh 2vh;
  .q-card {
    width: 50vw;
    background-color: #fff;
  }
  .qr {
    width: 4vw;
    &-suffix {
      font-size: 0.5em;
      color: #999;
      text-align: center;
    }
  }
  .gap {
    width: 1vw;
  }
}
</style>
